<template>
	<div class="big_box">
		<div class="box1">
			<div class="box2">
				<div class="box2_name">账号：</div>
				<el-input placeholder="输入账号模糊查询"></el-input>
			</div>
			<div class="box2">
				<div class="box2_name">性别：</div>
				<el-select v-model="value" placeholder="请选择性别">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
			</div>
			
			<div class="box2" v-if="sta1 == 1">
				<div class="box2_name">真实名字：</div>
				<el-input placeholder="输入真实名字"></el-input>
			</div>
			<div class="box2"v-if="sta1 == 1">
				<div class="box2_name">手机号码：</div>
				<el-input placeholder="输入手机号码"></el-input>
			</div>
			<div class="box2" v-if="sta1 == 1">
				<div class="box2_name">用户状态：</div>
				<el-select v-model="value" placeholder="请选择">
					<el-option
					  v-for="item in options"
					  :key="item.value"
					  :label="item.label"
					  :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="box2">
				<el-button type="primary" icon="el-icon-search">搜索</el-button>
				<el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
				<div class="zk" @click="zhankai()">{{font1}}</div>
			</div>
		</div>
		<div class="box3">
			<el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加用户</el-button>
			<el-button type="primary" icon="el-icon-download">导出</el-button>
			<el-button type="primary" icon="el-icon-upload2">导入</el-button>
		</div>
		<div class="box4">
			已选择<span class="fot1">0</span>项
			<span class="fot1" style="margin-left: 30px;">清空</span>
		</div>
		<el-table
			border=true
		    ref="multipleTable"
		    :data="tableData"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column type="selection" width="55"></el-table-column>
		    <el-table-column prop="name" label="真实姓名"></el-table-column>
			<el-table-column prop="name" label="头像"></el-table-column>
			<el-table-column prop="name" label="性别" sortable :sort-method="changesort"></el-table-column>
			<el-table-column prop="name" label="生日"></el-table-column>
			<el-table-column prop="name" label="手机号码"></el-table-column>
			<el-table-column prop="name" label="邮箱"></el-table-column>
			<el-table-column prop="name" label="状态"></el-table-column>
			<el-table-column  label="操作" width="100">
				<template slot-scope="scope">
					<div class="caozuo">
						<div>编辑</div>
						<div class="line2">|</div>
						<div>
							<el-dropdown>
							  <span class="el-dropdown-link gd">
							    更多<i class="el-icon-arrow-down el-icon--right"></i>
							  </span>
							  <el-dropdown-menu slot="dropdown">
							    <el-dropdown-item>黄金糕</el-dropdown-item>
							    <el-dropdown-item>狮子头</el-dropdown-item>
							    <el-dropdown-item>螺蛳粉</el-dropdown-item>
							    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
							    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
				</template>
			</el-table-column>
		  </el-table>
		<div class="pagination"><el-pagination layout="prev, pager, next" :total="1000"></el-pagination></div>
		<el-drawer
		  class="tc"
		  title="新增"
		  :visible.sync="drawer"
		  :direction="rtl"
		  :before-close="handleClose">
		  <div class="tc_body">
			<div><span class="xing">*</span>用户账号：</div>
			<el-input placeholder="请输入用户账号"></el-input>
		  </div>
		  <div class="tc_body">
			<div><span class="xing">*</span>用户账号：</div>
			<el-input placeholder="请输入用户账号"></el-input>
		  </div>
		</el-drawer>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drawer: false,
				sta1:0,
				font1:'展开 ∨',
				tableData: [{
				          date: '2016-05-03',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-02',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-04',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-01',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-08',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-06',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }, {
				          date: '2016-05-07',
				          name: '王小虎',
				          address: '上海市普陀区金沙江路 1518 弄'
				        }],
			}
		},
		methods: {
			changesort:function(a,b){
				console.log(a,b)
			},
			zhankai:function(){
				this.sta1 = !this.sta1
				if(this.sta1){
					this.font1 = '收起 ∧'
				}else{
					this.font1 = '展开 ∨'
				}
			}
		}
	}
</script>

<style scoped>
	.xing{
		color: red;
		margin-top: 4px;
		margin-right: 5px;
	}
	.tc_body :nth-child(1){
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 5px;
		font-size: 14px;
	}
	.tc_body{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30px;
	}
	.tc{
		height: calc(100vh - 61px);
		margin-top: 61px;
		
		
	}
	.c_head>i{
		position: absolute;
		right: 20px;
		top: 20px;
	}
	.c_head{
		padding: 16px 24px;
		border-bottom: 1px solid #e8e8e8;
		border-radius: 4px 4px 0 0;
		position: relative;
		text-align: center;
		color: rgba(0,0,0,.65);
	}
	.pagination{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 43px 0;
	}
	.gd{
		color: rgba(37, 143, 251, 1);
		font-size: 10px;
	}
	.caozuo{
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgba(37, 143, 251, 1);
		font-size: 10px;
		font-family: Roboto;
	}
	.fot1{
		color: #1890ff;
		margin: 0 5px;
	}
	.box4{
		background-color: #e6f7ff;
		border: 1px solid #91d5ff;
		color: rgba(0,0,0,.65);
		font-size: 14px;
		padding: 8px 15px 8px 37px;
		border-radius: 4px;
		margin-bottom: 20px;
	}
	.box3{
		margin-bottom: 20px;
	}
	.zk{
		margin-left: 20px;
		color: #1890ff;
	}
	.box2_name{
		white-space: nowrap;
	}
	.box2{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	.box1{
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.big_box{
		padding: 24px 32px;
		box-sizing: border-box;
		background: #FFFFFF;
	}
</style>
